<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博沃智慧 - 登录</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            position: relative;
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.1);
        }

        .input-focus {
            transition: all 0.3s ease;
        }

        .input-focus:focus {
            border-color: #667eea !important;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
            outline: none;
            transform: translateY(-1px);
        }

        .login-btn {
            background: var(--primary-gradient);
            transition: all 0.3s ease;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.25);
        }

        .password-toggle {
            transition: all 0.2s ease;
        }

        .password-toggle:hover {
            color: #667eea;
            transform: scale(1.1);
        }

        .checkbox-custom {
            appearance: none;
            width: 16px;
            height: 16px;
            border: 2px solid #ff0000;
            border-radius: 4px;
            transition: all 0.2s ease;
            cursor: pointer;
            position: relative;
            top: 0px;
        }

        .checkbox-custom:checked {
            background: var(--primary-gradient);
            border-color: #667eea;
        }

        .checkbox-custom:checked::after {
            content: '✓';
            color: white;
            display: block;
            text-align: center;
            line-height: 9px;
            font-size: 8px;
        }

        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
        }

        .shape {
            position: absolute;
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
        }

        .shape:nth-child(1) {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 2s;
        }

        .shape:nth-child(3) {
            bottom: 20%;
            left: 20%;
            animation-delay: 4s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .password-strength {
            height: 4px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .strength-weak { background: #ef4444; width: 33%; }
        .strength-medium { background: #f59e0b; width: 66%; }
        .strength-strong { background: #10b981; width: 100%; }

        .error-shake {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
    </style>
</head>
<body>
    <div class="floating-shapes">
        <div class="shape w-20 h-20 bg-white rounded-full"></div>
        <div class="shape w-16 h-16 bg-white rounded-lg"></div>
        <div class="shape w-12 h-12 bg-white rounded-full"></div>
    </div>

    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="glass-effect rounded-2xl shadow-2xl p-8 w-full max-w-md">
            <!-- Logo和标题 -->
            <div class="text-center mb-8">
                <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mx-auto mb-4 shadow-lg">
                    <i class="fas fa-brain text-white text-2xl"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-800 mb-2">博沃智慧</h1>
                <p class="text-gray-600">智能问答系统</p>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="space-y-6">
                <!-- 用户名 -->
                <div>
                    <div class="mb-2">
                        <i class="fas fa-user text-gray-500 mr-2"></i>
                        <label class="text-sm font-medium text-gray-700">用户名</label>
                    </div>
                    <input 
                        type="text" 
                        id="username"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                        placeholder="请输入用户名"
                        required
                    >
                </div>

                <!-- 密码 -->
                <div>
                    <div class="mb-2">
                        <i class="fas fa-lock text-gray-500 mr-2"></i>
                        <label class="text-sm font-medium text-gray-700">密码</label>
                    </div>
                    <div class="relative">
                        <input 
                            type="password" 
                            id="password"
                            class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg input-focus"
                            placeholder="请输入密码"
                            required
                        >
                        <button 
                            type="button"
                            id="togglePassword"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2 password-toggle text-gray-400"
                        >
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    <!-- 密码强度指示器 -->
                    <div class="mt-2">
                        <div class="password-strength" id="passwordStrength"></div>
                        <p class="text-xs text-gray-500 mt-1" id="strengthText">密码强度：未输入</p>
                    </div>
                </div>

                <!-- 记住密码 -->
                <div class="flex items-center justify-between">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" id="rememberMe" class="checkbox-custom mr-2">
                        <span class="text-sm text-gray-700">记住密码</span>
                    </label>
                    <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">忘记密码？</a>
                </div>

                <!-- 登录按钮 -->
                <button 
                    type="submit"
                    class="w-full login-btn text-white py-3 rounded-lg font-medium shadow-lg hover:shadow-xl"
                >
                    <i class="fas fa-sign-in-alt mr-2"></i>登录
                </button>

                <!-- 错误信息 -->
                <div id="errorMessage" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg text-sm">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <span id="errorText"></span>
                </div>
            </form>

            <!-- 其他选项 -->
            <div class="mt-6 text-center">
                <p class="text-sm text-gray-600">
                    还没有账号？
                    <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">立即注册</a>
                </p>
            </div>

            <!-- 安全提示 -->
            <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                <div class="flex items-start">
                    <i class="fas fa-shield-alt text-blue-600 mt-0.5 mr-2"></i>
                    <div class="text-sm text-blue-800">
                        <p class="font-medium mb-1">安全提示</p>
                        <ul class="text-xs space-y-1">
                            <li>• 密码采用加密传输，确保您的账户安全</li>
                            <li>• 建议使用复杂密码，包含字母、数字和特殊字符</li>
                            <li>• 不要在公共设备上记住密码</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        
        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            const icon = togglePassword.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });

        // 密码强度检测
        function checkPasswordStrength(password) {
            let strength = 0;
            const strengthBar = document.getElementById('passwordStrength');
            const strengthText = document.getElementById('strengthText');
            
            if (password.length >= 8) strength++;
            if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;
            
            strengthBar.className = 'password-strength';
            
            if (password.length === 0) {
                strengthText.textContent = '密码强度：未输入';
                strengthBar.style.width = '0';
            } else if (strength < 2) {
                strengthBar.classList.add('strength-weak');
                strengthText.textContent = '密码强度：弱';
            } else if (strength < 3) {
                strengthBar.classList.add('strength-medium');
                strengthText.textContent = '密码强度：中等';
            } else {
                strengthBar.classList.add('strength-strong');
                strengthText.textContent = '密码强度：强';
            }
        }

        passwordInput.addEventListener('input', (e) => {
            checkPasswordStrength(e.target.value);
        });

        // 表单提交
        const loginForm = document.getElementById('loginForm');
        const errorMessage = document.getElementById('errorMessage');
        const errorText = document.getElementById('errorText');

        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const rememberMe = document.getElementById('rememberMe').checked;
            
            // 模拟登录验证
            if (username.trim() === '' || password.trim() === '') {
                showError('请输入用户名和密码');
                return;
            }
            
            if (password.length < 6) {
                showError('密码长度不能少于6位');
                return;
            }
            
            // 模拟登录请求
            try {
                // 这里应该发送到后端进行验证
                console.log('登录信息：', { username, password, rememberMe });
                
                // 模拟成功登录
                setTimeout(() => {
                    alert('登录成功！');
                    // 跳转到主界面
                    // window.location.href = 'main.html';
                }, 1000);
                
            } catch (error) {
                showError('登录失败，请检查网络连接');
            }
        });

        function showError(message) {
            errorText.textContent = message;
            errorMessage.classList.remove('hidden');
            loginForm.classList.add('error-shake');
            
            setTimeout(() => {
                loginForm.classList.remove('error-shake');
            }, 500);
            
            setTimeout(() => {
                errorMessage.classList.add('hidden');
            }, 3000);
        }

        // 检查本地存储的登录信息
        window.addEventListener('load', () => {
            const savedUsername = localStorage.getItem('rememberedUsername');
            const savedPassword = localStorage.getItem('rememberedPassword');
            
            if (savedUsername && savedPassword) {
                document.getElementById('username').value = savedUsername;
                document.getElementById('password').value = savedPassword;
                document.getElementById('rememberMe').checked = true;
            }
        });

        // 记住密码功能
        document.getElementById('rememberMe').addEventListener('change', (e) => {
            if (!e.target.checked) {
                localStorage.removeItem('rememberedUsername');
                localStorage.removeItem('rememberedPassword');
            }
        });
    </script>
</body>
</html>